<template>
	<view class="registration">
		<view class="noChoice" v-if="!yesChoiceShow">
			<!-- 活动分组 -->
			<view class="topBox">
				<view class="tit">
					选择项目类别
				</view>
				<scroll-view scroll-x="true" class="scroll-tab">
					<view :class="['scroll-tab-item',v.id == param.group_id?'xz':'']" v-for="(v,i) in detail.group"
						:key="i" @click="switchCut(v)">
						{{v.title}}
					</view>
				</scroll-view>
				<view class="tit">
					活动时间
				</view>
				<view class="time">
					{{ format(detail.start_time)}} 到 {{format(detail.end_time)}}
				</view>
			</view>
			<!-- 添加报名信息 -->
			<view class="add">
				<view class="tit">
					报名信息
				</view>
				<view class="btn" @click="$refs.popup.open()">
					添加报名人
				</view>
			</view>

			<!-- 报名信息弹窗 -->
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view class="pop">
					<view class="title">
						添加报名人身份信息
					</view>
					<image class="close" src="https://yijili.oss-cn-beijing.aliyuncs.com/pool/Close-small.png"
						mode="scaleToFill" @click="$refs.popup.close()"></image>

					<view class="item" v-for="(v,i) in detail.item" :key="i">
						<view class="key">
							{{v.title}}
						</view>
						<input v-if="v.type == 1" class="uni-input" v-model.trim="v.value" :placeholder="`请输入${v.title}`" />
						<view v-if="v.type == 2">
							<view class="images">
								<upload @upload="imgUpload" :imagelist="v.imgs" :imgtype="i" text="上传图片"
									:imgsize="3" imgclass="apply">
								</upload>
							</view>
						</view>
					</view>

					<view class="Statement">
						<image v-if="false" src="https://yijili.oss-cn-beijing.aliyuncs.com/pool/h-no.png"
							mode="scaleToFill">
						</image>
						<image v-else src="https://yijili.oss-cn-beijing.aliyuncs.com/pool/yes.png" mode="scaleToFill">
						</image>
						<text class="t1">我已仔细阅读并同意</text>
						<text class="t2" @click="goProtocol">《赛事报名协议》</text>
					</view>

					<view class="btn xz" @click="btn1Confirm">
						确定
					</view>
				</view>
			</uni-popup>
		</view>

		<view class="yesChoice" v-else>
			<view class="infoTop">
				<view class="detail">
					<image src="/static/logo.png" mode="scaleToFill"></image>
					<view class="msg">
						<view class="tit">
							{{detail.title}}
						</view>
						<view class="position">
							{{detail.address}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						活动时间
					</view>
					<view class="right">
						{{detail.start_time}}
					</view>
				</view>
				<view class="item">
					<view class="left">
						项目类别
					</view>
					<view class="right">
						{{groupData.title}}
					</view>
				</view>
				<view class="item">
					<view class="left">
						支付金额
					</view>
					<view class="right" style="color: #EF0F0F;">
						￥{{groupData.price}}
					</view>
				</view>
				<view class="item">
					<view class="left">
						支付方式
					</view>
					<view class="right">
						微信
					</view>
				</view>
			</view>

			<!-- 报名信息 -->
			<view class="registrationInfo">
				<view class="tit">
					报名信息
				</view>
				<view class="person">
					<view class="left">
						<view class="" v-for="(v,i) in param.items" :key="i">
							<view v-if="v.type == 1">
								<view class="name" v-if="v.value.length < 5">
									{{v.key}}:{{v.value}}
								</view>
								<view class="sfz" v-else>
									{{v.key}}:{{v.value}}
								</view>
							</view>
							<!-- 图片 -->
							<view v-if="v.type == 2">
								<view class="imagesBox">
									{{v.key}}:
									<view class="imgs">
										<image v-for="todo in v.imgs" :src="todo" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<image class="close" src="https://yijili.oss-cn-beijing.aliyuncs.com/pool/Close-small.png"
						mode="scaleToFill" @click="editClose"></image>
				</view>
			</view>

			<view class="bottom">
				<view class="btn" @click="registration">
					确认支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		req
	} from '@/utils/req.js';
	export default {
		data() {
			return {
				detail: {},
				groupData:{},
				param: {
					group_id: 1,
					activity_id: "", //true	int		活动id
					items: []
				},
				yesChoiceShow: false,
			}
		},
		onLoad(option) {
			if (option.id) {
				this.param.activity_id = option.id
				this.getDetail();
			}
		},
		mounted() {

		},
		methods: {
			goProtocol() { // 跳转协议页面
				
			},
			imgUpload(e) { // 图片上传
				console.log("图片：", e);
				let {
					imagelist,
					imgtype
				} = e;
				// imagelist = imagelist.map(todo => todo.path);
				this.detail.item[imgtype].imgs = imagelist
				this.detail.item[imgtype].value = String(imagelist);
			},
			//活动报名
			async registration() {
				console.log(this.param);
				
				try {
					let res = await req.post("activity/app/IndexActivity/registration", this.param)
					console.error(res);
					if (res && this.groupData.price == "0.00") {
						uni.showToast({
							title: '报名成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/activity/myList'
							});

						}, 2000);
						return;
					}
					try {
						await this.$util.pay(res.pay_list)
						uni.showToast({
							title: '报名成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/activity/myList'
							});

						}, 2000);
					} catch (e) {
						this.$util.showToast({
							title: `支付失败`
						})
					}
					return
				} catch (err) {
					uni.showToast({
						title: err.error || '请稍后再试',
						icon: 'none'
					});
				}
			},
			switchCut(data) {
				this.param.group_id = data.id
				this.groupData = data
			},
			editClose(){
				this.param.items = []
				this.yesChoiceShow = false
			},
			goProtocol() {
				uni.navigateTo({
					url: "/pages/activity/protocol"
				})
			},
			btn1Confirm() {
				const found = this.detail.item.find(item => item.value == "");
				if (found) {
					this.detail.item.map(v => {
						if (!v.value) {
							uni.showToast({
								title: '请输入' + v.title,
								icon: 'none'
							});
							this.yesChoiceShow = false
							this.param.items = []
						}
					})
				} else {
					this.detail.item.map(v => {
						this.param.items.push({
							key: v.title,
							value: v.value,
							imgs: v.imgs?v.imgs.map(todo => todo.path):[],
							type: v.type,
						})
					})
					this.$refs.popup.close()
					this.yesChoiceShow = true
					
				}
			},
			format(time) {
				let date = new Date(time);
				const y = date.getFullYear();
				const m = String(date.getMonth() + 1).padStart(2, '0');
				const d = String(date.getDate()).padStart(2, '0');
				const h = String(date.getHours()).padStart(2, '0');
				const min = String(date.getMinutes()).padStart(2, '0');
				return `${y}-${m}-${d} ${h}:${min}`;
			},
			async getDetail() {
				let res = await this.$api.activity.getDetail({
					id: this.param.activity_id
				})
				console.error(res);
				let registered_num = 0
				res.info.group.map(v => {
					registered_num = registered_num + (v.price * 1)
				})
				res.info.item.map(v => {
					v.value = ""
				})
				res.info.registered_num = registered_num
				res.info.price = Number(res.info.price);
				res.info.manCount = 0;
				res.info.womenCount = 0;
				res.info.registration.map(todo => {
					if (todo.sex == 1) res.info.manCount += 1;
					else res.info.womenCount += 1;
				})
				res.startTime = new Date(res.start_time).getTime();
				res.endTime = new Date(res.end_time).getTime();
				res.thenTime = new Date().getTime();
				this.param.group_id = res.info.group[0].id
				this.groupData = res.info.group[0]
				res.info.item.map(todo => {
					if (todo.type == 2) todo.imgs = [];
				})
				
				this.detail = res.info;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.registration {
		padding: 24rpx;

		.noChoice {
			.topBox {
				// width: 702rpx;
				// height: 396rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 32rpx 24rpx 40rpx;

				.scroll-tab {
					display: flex;
					white-space: nowrap;
					box-sizing: border-box;
					padding-bottom: 40rpx;
					border-bottom: 1rpx solid #F0F0F0;
					margin-bottom: 40rpx;

					.scroll-tab-item {
						position: relative;
						display: inline-flex;
						justify-content: center;
						align-items: center;
						width: 208rpx;
						height: 72rpx;
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						border: 2rpx solid #ACACAC;
						font-weight: bold;
						font-size: 28rpx;
						color: #ACACAC;
						margin-right: 16rpx;
					}

					.xz {
						background: #8DE5B7;
						border: none;
						border-radius: 100rpx 100rpx 100rpx 100rpx;
						color: #FFFFFF;
					}
				}

				.tit {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					padding-bottom: 32rpx;
				}

				.time {
					font-weight: bold;
					font-size: 32rpx;
					color: #ACACAC;
				}
			}

			.add {
				// width: 702rpx;
				// height: 224rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 24rpx;
				margin-top: 24rpx;
				padding: 32rpx 24rpx;

				.tit {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					padding-bottom: 32rpx;
				}

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 654rpx;
					height: 92rpx;
					background: #F7F7F7;
					border-radius: 100rpx 100rpx 100rpx 100rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.pop {
				position: relative;
				width: 750rpx;
				// height: 914rpx;
				background: #FFFFFF;
				border-radius: 15rpx 15rpx 0 0;
				padding: 48rpx 48rpx 78rpx 48rpx;

				.title {
					font-weight: 800;
					font-size: 32rpx;
					color: #333333;
					text-align: center;
					margin-bottom: 38rpx;
				}

				.close {
					position: absolute;
					top: 42rpx;
					right: 24rpx;
					width: 48rpx;
					height: 48rpx;
				}

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 104rpx;
					border-bottom: 1rpx solid #F0F0F0;

					.key {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}

					.uni-input {
						font-weight: 500;
						font-size: 28rpx;
						color: #333;

						// width: 100rpx;
						.uni-input-placeholder {
							font-weight: 500;
							font-size: 28rpx;
							color: #ACACAC;
							text-align: right;
						}

						/deep/ .uni-input-input {
							text-align: right;
						}
					}
				}

				.Statement {
					display: flex;
					align-items: center;
					margin-top: 48rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}

					.t1 {
						font-weight: bold;
						font-size: 28rpx;
						color: #ACACAC;
					}

					.t2 {
						font-weight: bold;
						font-size: 28rpx;
						color: #8AC4AA;
					}
				}

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 654rpx;
					height: 92rpx;
					background: #CDCDCD;
					border-radius: 80rpx;
					font-weight: 800;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-top: 32rpx;
				}

				.xz {
					background: linear-gradient(90deg, #8DE6B7 0%, #8AC6AB 100%);
				}
			}
		}

		.yesChoice {
			.infoTop {
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 0 24rpx;

				.detail {
					display: flex;
					padding: 32rpx 0;

					image {
						width: 224rpx;
						height: 156rpx;
					}

					.msg {
						padding: 8rpx 0 0 16rpx;

						.tit {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
							line-height: 36rpx;
							padding-bottom: 12rpx;
						}

						.position {
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							line-height: 32rpx;
						}
					}
				}

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 96rpx;
					border-top: 2rpx solid rgba(172, 172, 172, 0.15);

					.left {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}

					.right {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}

			.registrationInfo {
				// width: 702rpx;
				// height: 224rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 24rpx;
				margin-top: 24rpx;
				padding: 0 24rpx;

				.tit {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					padding: 32rpx 0;
					border-bottom: 2rpx solid rgba(172, 172, 172, 0.15);
				}

				.person {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 32rpx 0 40rpx 0;

					.left {
						.name {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							line-height: 32rpx;
							margin-bottom: 16rpx;
						}

						.sfz {
							font-weight: 500;
							font-size: 24rpx;
							color: #ACACAC;
							line-height: 28rpx;
							margin-bottom: 16rpx;
						}
					}

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.bottom {
				width: 750rpx;
				height: 184rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 99;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 654rpx;
					height: 92rpx;
					background: linear-gradient(270deg, #8AC4AA 0%, #8DE6B7 100%);
					border-radius: 80rpx 80rpx 80rpx 80rpx;
					font-weight: 800;
					font-size: 32rpx;
					color: #FFFFFF;
					margin: 16rpx auto 0;
				}
			}
		}
	}
	.images{
		padding-top: 20rpx;
	}
	.imagesBox{
		display: flex;
		align-items: center;
		.imgs{
			padding-left: 20rpx;
			display: flex;
			align-items: center;
			image{
				max-width: 100rpx;
				max-height: 100rpx;
			}
		}
	}
</style>